var users = new Array();    //存放所有用户的数组
var operateType;    //按钮的操作类型

//创建用户的构造方法
function user(code,userName,sex,password,age,birthday){
    this.code=code;
    this.userName=userName;
    this.sex=sex;
    this.password=password;
    this.age=age;
    this.birthday=birthday;
}

//初始化数据
function init(){
    users[0] = new user("1001","张三","男","111","30","1991-1-1");
    users[1] = new user("1002","李四","女","222","29","1992-1-1");
    users[2] = new user("1003","王五","男","333","28","1993-1-1");
    users[3] = new user("1004","赵六","女","444","27","1994-1-1");

    refresh(users);     //保证表格中的数据是最新的
}

//刷新表格
function refresh(users){
    var tbody = document.getElementById("tbody");
    var html = "";
    var color = "warning";
    var flag = true;
    for(var i in users){
        if(flag){
            color = "info";
        }else{
            color = "warning";
        }
        html = html+"<tr class='"+color+"'><td style='width:130px;'><input type='checkbox'></td><td id='code'>"
            +users[i].code+"</td><td id='userName'>"
            +users[i].userName+"</td><td id='sex'>"
            +users[i].sex+"</td><td id='password'>"
            +users[i].password+"</td><td id='age'>"
            +users[i].age+"</td><td id='birthday'>"
            +users[i].birthday+"</td>"
            +"</tr>";

            flag = !flag;   //颜色转换
    }
    tbody.innerHTML = html;     //在表格中创建所有tr元素
}

//当点击添加按钮时
$("#user_add").on("click",function(){
    operateType="add";
});


//当点击修改按钮时
$("#user_editor").on("click",function(){
    operateType="editor";
});

//保存按钮
$("#save").on("click",function(){
    if(operateType=="add"){
        var newUser = new user($("#m_code").val(),$("#m_userName").val(),$("#m_sex").val(),$("#m_password").val(),$("#m_age").val(),$("#m_birthday").val());
        users = users.concat(newUser);      //在原数组中添加一个新的用户元素
    }else if(operateType=="editor"){
        for(var i = 0; i<users.length; i++){
            if(code==users[i].code){    //如果选中的用户编号和数组中的某个用户编号相同，这个用户就是要修改的用户
                users[i].code = $("#m_code").val();
                users[i].userName = $("#m_userName").val();
                users[i].sex = $("#m_sex").val();
                users[i].password = $("#m_password").val();
                users[i].age = $("#m_age").val();
                users[i].birthday = $("#m_birthday").val();

            }
        }
        alert("修改成功");
    }
    refresh(users);     //保证表格中的数据是最新的
});

//删除用户
$("#user_delete").on("click",function(){
    var checkboxs = $("input[type='checkbox']");    //获取所有的复选框
    let f = false;      //是否选中用户的标记
    for(var i = 0;i<checkboxs.length;i++){
        var box = checkboxs[i];
        if(box.checked){    //某个复选框被选中
            f=true;     //表示有复选框被选中
            box=$(box);     //jsdom对象转换为jQuery对象
            let code = box.parent().siblings("#code").text();   //复选框父级的兄弟#code元素
            for(var i = 0;i<users.length;i++){
                if(code==users[i].code){
                    users.splice(i,1);      //删除1个数组中下标为i的元素
                    alert("删除用户成功!");
                }
            }
        }
    }
    if(!f){
        alert("请选择一个用户!");
    }
    refresh(users);     //保证表格中的数据是最新的
});

//编辑用户
var code;   //被修改的用户工号
$("#user_editor").on("click",function(){
    var checkboxs = $("input[type='checkbox']");    //获取所有的复选框
    let f = false;      //是否选中用户的标记
    for(var i = 0;i<checkboxs.length;i++){
        var box = checkboxs[i];
        if(box.checked){    //某个复选框被选中
            f=true;     //表示有复选框被选中
            $(this).attr("data-toggle","modal");    //启用模态框
            $(this).attr("data-target","#modal01")  //启用模态框
            box=$(box);
            code = box.parent().siblings("#code").text();   //复选框父级的兄弟#code元素
            var userName = box.parent().siblings("#userName").text();
            var sex = box.parent().siblings("#sex").text();
            var password= box.parent().siblings("#password").text();
            var age = box.parent().siblings("#age").text();
            var birthday = box.parent().siblings("#birthday").text();
            
            //选中用户的各项数据，放在模态框的相应input框中
            $("#m_code").val(code);
            $("#m_userName").val(userName);
            $("#m_sex").val(sex);
            $("#m_password").val(password);
            $("#m_age").val(age);
            $("#m_birthday").val(birthday);
        }
    }
    if(!f){
        alert("请选择一个用户");
        $(this).attr("data-toggle",null);   //禁用模态框
        $(this).attr("data-target",null);   //禁用模态框
    }

});

//查询用户
var newusers;
$("#user_select").on("click",function(){
    newusers = new Array();
    var codeLike = $(this).siblings("#findById").val();
    for(var i = 0; i<users.length; i++){
        if(users[i].code.indexOf(codeLike)>=0){     //如果用户编号中存在被查询的编号关键字
            newusers = newusers.concat(users[i]);   //将这个对象添加到newusers这个数组中
        }
    }
    refresh(newusers);      //  保证表格中数据是模糊匹配来的
});